.top-warp {
  width: 100%;
  height: 100%;
  background-image: @user-bg-img;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 100rpx;
  position: relative;
  .person-discount{
	  display: flex;
	  justify-content: space-around;
	  margin-top: 80rpx;
	  &-item{
		  display: flex;
		  flex-direction: column;
		  align-items: center;
	  }
	  .content-value{
		  display: inline-block;
		  margin-bottom: 12rpx;
		  color: #000000;
		  font-weight: 500;
		  font-size: 31rpx;
	  }
	  .content-info{
		  font-size: 31rpx;
		  color: #666666;
		  font-weight: 400;
	  }
  }
  .user-tips {
    margin: 50rpx 47rpx;
    display: flex;
    /* #ifdef H5 */
    justify-content: space-between;
    /* #endif */
    align-items: center;

    .iconfont {
      font-size: 33rpx;
      color: @color-font;
      /* #ifdef MP-WEIXIN */
      margin: 0 10rpx;
      margin-left: 50rpx;
      /* #endif */
    }

    .icon-badge {
      display: flex;
    }
  }

  .user-myself {
    display: flex;
    align-items: center;
    margin-top: 100rpx;

    .u-photo {
      border-radius: 50%;
      width: 155rpx;
      height: 155rpx;
      margin: 0 36rpx 0 30rpx;

      >image {
        border-radius: 50%;
        width: 155rpx;
        height: 155rpx;
        position: relative;
        left: -14px;
      }
    }

    .u-userInfo {
      font-family: "ali-m";
      color: @color-white;
      display: flex;
      flex-direction: column;

      .u-name-box {
        font-weight: 500;
        text-shadow: 0rpx 2rpx 4rpx rgba(4, 0, 0, 0.5);

        .u-name {
          font-size: @font-size-47;
        }

        .u-position {
          font-size: @font-size-20;
        }
      }

      .u-member {
        text-shadow: 0rpx 2rpx 4rpx rgba(4, 0, 0, 0.5);
        font-size: @font-size-23;
        font-family: "ali";
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .sale-ratio {
        margin-top: 10rpx;
      }

      .u-badge-box {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;

        .u-badge {
          width: 113rpx;
          height: 38rpx;
          line-height: 38rpx;
          font-size: @font-size-20;
          text-align: center;
          border-radius: 15rpx;
          color: @color-black;
          margin-right: 10rpx;
          //   padding: 10rpx 25rpx;
          &.unrecognized {
            background: #bfbfbf;
          }

          &.authenticated {
            background: linear-gradient(90deg, #ffd0b1 0%, #c89181 100%);
          }

          &.administrators {
            background: linear-gradient(
              90deg,
              #d0dbe6 0%,
              #e7eaf1 50%,
              #e4e8ef 100%
            );
          }
        }
      }
    }
  }
}

.fade-out {
  width: 100%;
  height: 70rpx;
  background-image: @user-fadeout-img;
  background-size: 100% 100%;
  // background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
}

.user-space {
  width: 100%;
  /* #ifdef MP-WEIXIN */
  height: 130rpx;
  /* #endif */

  /* #ifdef H5 */
  height: 35rpx;
  /* #endif */
}

.user-section {
  margin: 0 10rpx 15rpx;
  border-radius: 20rpx;
  // padding: 4vw;
  box-sizing: border-box;
  background-color: @color-font;
  width: calc(100% - 50rpx);
  margin-top: 50rpx;
  &.user-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 25rpx 40rpx;
    background: linear-gradient(90deg, #737391 0%, #d3c8e1 100%);
    margin: 0 auto;
    margin-top: 50rpx;
    .manager-badge {
      position: absolute;
      right: 30rpx;
      top: 20rpx;
      width: 20rpx;
      height: 20rpx;
      background-color: @color-red;
      border-radius: 50%;
      z-index: 999;
    }
    .user-section-info {
      width: 450rpx;
    }
    .user-section-tip {
      font-family: "ali";
      font-size: @font-size-23;
      color: @color-origin-white;
      &.name {
        margin-left: 20rpx;
      }
    }
    .manager-btn {
      width: 200rpx;
    }
    .mini-btn {
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 5rpx 10rpx;
    }
  }

  &.user-section-radius {
    position: absolute;
    width: calc(100% - 50rpx);
    top: 500rpx;
  }

  .u-c-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .u-c-num {
    font-size: @font-size-39;
    font-family: "din";
    font-weight: bold;
    color: @color-blue;

    &.my-green {
      color: @color-green;
    }
  }

  .u-c-img {
    width: 84rpx;
    height: 84rpx;
  }

  .u-c-title {
    font-size: @font-size-23;
    font-family: "ali";
    font-weight: 400;
    color: #272636;
  }
}

.content {
  padding-bottom: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cancellation-box {
  position: fixed;
  width: 570rpx;
  height: 500rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .cancellation {
    width: 530rpx;
    height: 306rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    .name {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-weight: 400;
      font-family: "ali";
    }

    .tail {
      text-align: center;
      font-size: 31rpx;
      color: #5590f6;
      height: 100rpx;
      line-height: 100rpx;
    }
  }

  .close-btn {
    width: 74rpx;
    height: 74rpx;
    line-height: 74rpx;
    text-align: center;
    background: #ffffff;
    opacity: 0.85;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 20rpx;
  }
}

.to-login {
  font-size: 30rpx;
  font-family: ali;
  font-weight: bold;
  color: #272636;
  width: 155rpx;
  height: 200rpx;
  line-height: 400rpx;
  padding: 30rpx;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 170rpx;
}